<template>
    <div class="subDiv" >这是子模块的地盘了<br>
        <h1>watchEffect</h1>
        <h2>你的身高是：{{height}} 厘米 </h2>
        <h2 ref="h2id">你的体重是：{{weight}} 公斤 </h2>
        <h2>你的体重指数为（RMI）：{{ rmi }}</h2>
        <button @click="changeHeight">改变身高</button>
        <button @click="changeWeight">改变体重</button><br>
        <button @click="showH2">查看h2</button>
    </div>
    
</template>

<script setup lang="ts" name="Person">
    import { ref,watchEffect } from 'vue'
    const height = ref(150)
    const weight = ref(50)
    const rmi = ref(0)
    const changeHeight = () =>{
        height.value += 2
    }
    const changeWeight = () =>{ 
        weight.value += 1
    }
    watchEffect(() => {
        rmi.value = weight.value / (height.value * height.value) * 10000
    })
    const h2id = ref(null)
    const showH2 = () =>{   
        console.log(h2id.value)
    }

    // 主动暴露给父组件
    defineExpose({
        h2id
    })
</script>

<style scoped>
    .subDiv{
        color:blue;
        background-color:rgb(210, 205, 205);
        width: 770px;
        height: 300px;
        font-size: 15px;
        font-weight: 800;
        position:absolute;
        top:100px;
        border-radius: 20px;
        /** text-align: center;  */
        padding-left: 30px;
        padding-top: 30px;
        }
    button{
        width: 100px;
        height: 30px;
        font-size: 15px;
        margin: 10px;
        }
    h1{
        font-size: 20px;
    }
    h2{
        font-size: 18px;
    }
</style>